<template>
	<ContentWrap :hideHeader="true" v-if="!hideToolbar"> 
 
		<el-space>
			<MdpSelect  v-if="!simple" itemCode="objType" v-model="filters.objType" placeholder="对象类型"/>
			<XmProjectSelect v-model="filters.projectId" :collect-id="collectId" :link-product-id="productId" v-if="!projectId && !bizId"/>
			<XmProductSelect v-model="filters.productId" :link-project-id="projectId" v-if="!productId&& !bizId"/>
			<el-input v-model="filters.remarks"  placeholder="操作说明"/>
			<el-input v-model="filters.operUsername"  placeholder="操作人"/>
 			<el-button type="primary" v-loading="load.list" :disabled="load.list==true" @click="searchTableDatas">查询</el-button>
		</el-space>
		
	</ContentWrap> 
	<!--列表 XmRecord xm_record-->
	<el-table v-if="showType=='table'" ref="table" v-adaptive  :data="tableDatas" @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
		<el-table-column type="index" width="50" />
		<el-table-column prop="operUsername" label="操作人" min-width="150"   sortable/>
		
		<el-table-column prop="objType" label="类型" width="80"  sortable>
			<template #default="scope">
				<MdpSelect v-model="scope.row.objType" itemCode="objType" :disabled="true" showStyle="tag"/>
			</template>
			</el-table-column>
		<el-table-column prop="remarks" label="操作说明" min-width="350">
			<template #default="scope">
				<el-link @click="$refs['dlg'].open(scope.row)" >
					<div class="image-box-record" style="width:100%;max-height:200px;overflow-y: scroll;"> 
						<div  v-html="scope.row.remarks" ></div>
					</div>

				</el-link>
			</template>

		</el-table-column>  
		
		<el-table-column prop="operTime" label="操作时间" min-width="150"  show-overflow-tooltip  sortable/> 
		
		<el-table-column prop="projectId" label="项目/产品" v-if="!simple" min-width="180" show-overflow-tooltip  sortable>
			<template #default="scope">
				<el-link v-if="scope.row.projectId" @click="toProject(scope.row)">{{scope.row.projectId}}</el-link> 
				<el-link v-else-if="scope.row.productId" @click="toProduct(scope.row)">{{scope.row.productId}}</el-link> 
			</template>
		</el-table-column>   
		
		<el-table-column prop="bizId" label="对象编号" v-if="!simple" min-width="150" show-overflow-tooltip  sortable>
			<template #default="scope">
				<el-link  @click="toBiz(scope.row)">{{scope.row.bizId}}</el-link> 
			</template>
		</el-table-column> 
	</el-table> 
	<el-pagination v-if="showType=='table'" size="small" layout="slot,total, sizes, prev, pager,next"  @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;" />
	<el-scrollbar v-adaptive>
	<el-timeline style="margin-top:20px;"  v-if="showType!='table'" >
    <el-timeline-item placement="top"
      v-for="(activity, index) in tableDatas"
      :key="index"   
			size="large"
			type="primary"
      :timestamp="activity.operTime"
			:hollow="true"
    >
		 <div @click="toBiz(activity)">
				<h4>{{ activity.operUsername }}</h4>
				<p>{{ activity.remarks }}</p> 
		 </div>
    </el-timeline-item>
  </el-timeline>
</el-scrollbar>
		<el-space class="padding-left" v-if="showType!='table'"><el-button v-loading="loadList" size="small" icon="Refresh" style="float:right;margin-top:10px;" @click="searchTableDatas()"/><el-pagination size="small" layout="slot,total, sizes, prev, pager,next"  @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;" /></el-space>
	<MdpDialog width="80%" ref="dlg">
		<template #default="{data}">   
					<el-form label-position="left"> 
						<el-row>
							<el-col :span="6">
						<el-form-item label="对象类型：" prop="objType">
								<MdpSelect v-model="data.objType" itemCode="objType" :disabled="true" showStyle="tag"/> 
							</el-form-item>

							</el-col>
							<el-col :span="6" v-if="data.projectId||data.productId">

								<el-form-item label="归属项目：" prop="projectId" v-if="data.projectId">
								{{data.projectId}}
							</el-form-item>
							<el-form-item label="归属产品：" prop="productId"  v-else-if="data.productId">
								{{data.productId}}
							</el-form-item> 
							</el-col>
							<el-col :span="6">
							<el-form-item label="对象编号：" prop="bizId">
								{{data.bizId}}
							</el-form-item>

							</el-col>
							<el-col :span="6">
							<el-form-item label="上级编号：" prop="bizId">
								{{data.bizId}}
							</el-form-item> 

							</el-col>
							<el-col :span="6">
							<el-form-item label="操作：" prop="action">
								<el-tag type="warning">{{data.action}}</el-tag>
							</el-form-item> 

							</el-col>
							<el-col :span="6">
							<el-form-item label="操作人：" prop="username">
								<el-tag type="warning">{{data.operUsername}}</el-tag>
							</el-form-item> 

							</el-col>
							<el-col :span="6">
							<el-form-item label="操作人ip：" prop="ip">
								<el-tag type="warning">{{data.ip}}</el-tag>
							</el-form-item> 

							</el-col>
							<el-col :span="6">
							<el-form-item label="操作时间：" prop="operTime">
								<el-tag type="warning">{{data.operTime}}</el-tag>
							</el-form-item> 

							</el-col>
						</el-row>
							


						</el-form> 
					<el-form label-position="top">  
							<el-form-item label="操作说明：" prop="remarks">
								<div class="image-box-record padding border"> 
											<div  v-html="data.remarks" ></div>
									</div>
							</el-form-item> 
						</el-form>  
			

		</template>
		<template #footer>
			<el-button icon="close" @click="$refs['dlg'].close()">关闭</el-button>
		</template>
	</MdpDialog>
	<mdp-dialog ref="bugDlg" fullscreen title="问题">
		<template #default="{visible,data,dialog}">
			<xm-question-detail :visible="visible" :reload="true" :xmQuestion="data.formData" @close="dialog.close()"/>
		</template>
	</mdp-dialog>
	
	<mdp-dialog ref="menuDlg" fullscreen title="故事">
		<template #default="{visible,data,dialog}">
			<xm-menu-detail :visible="visible" :reload="true" :formData="data.formData" @close="dialog.close()"/>
		</template>
	</mdp-dialog>
	
	<mdp-dialog ref="taskDlg" fullscreen title="任务">
		<template #default="{visible,data,dialog}">
			<xm-task-detail :visible="visible" :reload="true" :formData="data.formData" @close="dialog.close()"/>
		</template>
	</mdp-dialog>
	
	<mdp-dialog ref="caseDlg" fullscreen title="测试用例">
		<template #default="{visible,data,dialog}">
			<xm-test-case-detail :visible="visible" :reload="true" :xmTestCase="data.formData" @close="dialog.close()"/>
		</template>
	</mdp-dialog>
	
	<mdp-dialog ref="execCaseDlg" fullscreen title="执行用例">
		<template #default="{visible,data,dialog}">
			<xm-test-plan-case-detail :visible="visible" :reload="true" :xmTestPlanCase="data.formData" @close="dialog.close()"/>
		</template>
	</mdp-dialog>
</template>

<script>
	import util from '@/components/mdp-ui/js/util';//全局公共库 
	import  officeUser from "@/assets/imgs/office-user.png"

	import { listXmRecord, delXmRecord, batchDelXmRecord } from '@/api/xm/core/xmRecord';
	import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import { MdpTableMixin } from '@/components/mdp-ui/mixin/MdpTableMixin.js';

	export default {
		mixins:[MdpTableMixin],
		computed: {
		    ...mapState(useUserStore,[
		      'userInfo','roles'
		    ])
		},
		props:['showType',"collectId","projectId",'productId',"objType","bizId","simple" ,"visible",'pbizId','topId','kpiId','hideToolbar'],
		watch:{ 
			bizId:function(bizId){
				this.searchTableDatas();
			}
		},
		data() {
			return { 
				currOpType: 'select',
				filters: {
					key: '',
					objType:'',
				}, 
				pageInfo:{//分页数据
					total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
					pageSize:10,//每页数据
					count:true,//是否需要重新计算总记录数
					pageNum:1,//当前页码、从1开始计算
					orderFields:["oper_time"],//排序列 如 ['sex','student_id']，必须为数据库字段
					orderDirs:["desc"]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
				},
  
				addFormVisible: false,//新增xmRecord界面是否显示
				//新增xmRecord界面初始化数据
				addForm: {
					id:'',projectId:'',operUserid:'',operUsername:'',operTime:'',objType:'',action:'',oldValue:'',newValue:'',remarks:'',taskId:'',reqNo:'',branchId:'',ip:''
				},

				editFormVisible: false,//编辑界面是否显示
				//编辑xmRecord界面初始化数据
				editForm: {
					id:'',projectId:'',operUserid:'',operUsername:'',operTime:'',objType:'',action:'',oldValue:'',newValue:'',remarks:'',taskId:'',reqNo:'',branchId:'',ip:''
				}, 
				apis:{
					list: listXmRecord,
					del: delXmRecord,
					batchDel: batchDelXmRecord
				},
				officeUser:officeUser,
			}
		},//end data
		methods: {
			 
			//获取列表 XmRecord xm_record
			preQueryParamCheck( params ) {
				 
				if(this.projectId){
					params.projectId=this.projectId;
				}
				if(this.productId){
					params.productId=this.productId;
				}
				if(this.bizId){
					params.bizId=this.bizId;
				}
				if(this.pbizId){
					params.pbizId=this.pbizId;
				}
				if(this.collectId){
					params.collectId=this.collectId
				} 
				if(this.topId){
					params.topId=this.topId;
				}
			 return  true;
			},
			initCurrData(){
				this.filters.objType=this.objType
				this.filters.bizId=this.bizId
				this.filters.projectId=this.projectId
				this.filters.productId=this.productId
				this.searchTableDatas()
			},
			toBiz(row){
				if(row.objType=='1'){//项目
					this.toProject(row)
				}else if(row.objType=='2'){//任务
					this.$refs['taskDlg'].open({formData:{id:row.bizId}})
				}else if(row.objType=='3'){//产品
					this.toProduct(row)
				}else if(row.objType=='4'){//需求 
					this.$refs['menuDlg'].open({formData:{menuId:row.bizId}})
				}else if(row.objType=='5'){//问题
					this.$refs['bugDlg'].open({formData:{id:row.bizId}})
				}else if(row.objType=='6'){//迭代
					this.toIteration(row)
				}else if(row.objType=='7'){//团队
					this.toProject(row)
				}else if(row.objType=='8'){//组织
					this.$message("不支持该对象跳转")
				}else if(row.objType=='TB'){//测试库
					this.toTestCasedb(row)
				}else if(row.objType=='TC'){//测试用例 
					this.$refs['caseDlg'].open({formData:{id:row.bizId}})
				}else if(row.objType=='TE'){//执行用例
					this.$refs['execCaseDlg'].open({formData:{planId:row.pbizId,caseId:row.bizId}})
				}else if(row.objType=='TP'){//测试计划
					this.toTestPlan(row)
				}else if(row.objType=='R'){//风险
					this.toRisk(row)
				}else if(row.objType=='KPI'){//kpi
					this.toKpi(row)
				}else{
					this.$message("不支持该对象跳转")
				}
			},
			toProduct(row){ 
				this.$router.push({ name:'productOverview', query: {productId:row.productId||row.bizId} })
			},
			toProject(row){ 
				this.$router.push({ name:'projectOverview', query: {projectId:row.projectId||row.bizId} })
			},
			toIteration(row){ 
				this.$router.push({ name:'iterationOverview', query: {iterationId:row.bizId} })
			},
			toTestPlan(row){
				this.$router.push({
                path:'/xm/test/view/plan/detail',
                query:{
										casedbId:row.topId,
                    id:row.bizId
                }
            }) 
			},
			toTestCasedb(row){
				this.$router.push({ name:'testOverview', query: {casedbId:row.bizId} })
			},
			toKpi(row){
				this.$router.push({ name:'kpiOverview', query: {kpiId:row.bizId} })
			},
			toRisk(row){
				this.$router.push({ name:'riskOverview', query: {riskId:row.bizId} })
			}

		},//end methods
		components: {

		    //在下面添加其它组件
		},
		mounted() {  
			this.initData()
		}
	}

</script>
<style lang="less">
.image-box-record {
  width: 100%; /* 容器宽度百分百 */ 
  overflow: hidden; /* 超出容器的图片部分将被隐藏 */
}
 
.image-box-record img {
  width: 100%; /* 图片宽度百分百 */ 
  object-fit:contain; /* 裁剪并覆盖容器 */
} 
</style> 
